<template>
  <div class="pai">
    <div
      style="width: 100%; height: 250px; background-color: rgba(41, 40, 42, 1)"
    >
      <van-icon
        @click="index"
        name="arrow-left"
        size="40px"
        style="margin-top: 2%"
        color="#fff"
      />
      <div
        style="
          text-align: center;
          color: #cab394;
          font-size: 50px;
          padding-top: 10px;
        "
      >
        <img src="../assets/xv.png" alt="" width="370px" />
      </div>
      <div style="text-align: center; color: #cab394; font-size: 20px">
        最美最靠谱的女人
      </div>
      <div
        style="
          text-align: center;
          margin-top: 5px;
          width: 100%;
          height: 25px;
          background-color: rgba(244, 234, 221, 1);
          border-radius: 20px;
          color: #655034;
          font-size: 17px;
        "
      >
        根据近3个月浏览,收藏等数据综合计算
      </div>
    </div>

    <div
      style="
        width: 100%;
        height: 100%;
        background-color: rgba(245, 245, 245, 1);
        float: left;
      "
    >
      <dir
        v-for="(objj, index) in list"
        :key="index"
        style="
          
          border: 2px solid rgba(236, 219, 196, 1);
          width: 17%;
          height: 50px;
          background-color: rgba(248, 242, 233, 1);
          margin-left: 2%;
          margin-top: 20px;
          border-radius: 20px;
          float: left;
          font-size:10px
        "
      >
        <span style="margin-left: -15%;line-height:20px">{{
          objj.name
        }}</span>
        <br>
        <span style="margin-left: -15%;">{{ objj.pname }}</span>
      </dir>
      <!--  -->
      <div class="ranking-2">
        <span><b>热销美容</b></span>
      </div>
      <div class="ranking-3" v-for="obj in array" :key="obj.id">
        <div class="ranking-3-1" >
          <img
          @click="xingq(obj)"
            :src="obj.proimg"
            width="80%"
            height="150px"
            style="border-radius: 20px"
            alt=""
          />
        </div>
        <div class="rangking-3-2">
          <span>{{obj.proname}}</span>
          <br>
          <br>
          <span>{{obj.products}}</span>
          <p style="color: red">￥{{obj.price}}</p>
          <p>
            推荐指数：♥♥♥♥♥
          </p>
        </div>
        <div class="rangking-3-3">
          <span><b> 推荐理由</b>:效果超出预期。美容</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
     
      list: [
        { name: "店铺销量", pname: "立即变美" },
        { name: "店铺人气", pname: "立即变美" },
        { name: "店铺推荐", pname: "立即变美" },
      ],
      array:[]
    };
  },
  created () {
    this.getList()
  },
  methods: {

     getList() {
      //查询收藏套餐数量
      axios({
        url: "/api/product/getPaihang",
        method: "GET",      
      }).then((res) => {
        this.array = res.data;
        
      });
    },
    //返回首页
    index() {
      this.$router.go(-1);
    },
    //跳转详情
    xingq(obj) {
      this.$router.push({ path: "/xingq",query:{id:obj.id} });
    },
  },
};
</script>

<style>
.rangking-3-3 {
  width: 100%;
  height: 30px;
  float: left;
  /* background-color: aqua; */
  margin-top: 45%;
  font-size: 15px;
 margin-left: -80%;
  
}
.rangking-3-2 {
  float: left;
  font-size: 13px;
  margin-left: 5px;
}
.ranking-3-1{
    float: left;
    width: 50%;
    height: 150px;
}
.ranking-3 {
  float: left;
  margin-top: 10px;
  width: 95%;
  font-size: 50px;
  height: 200px;
  background-color: #fff;
  margin: 20px 15px;
display: flex;
  border-radius: 20px;
}
.ranking-2 span {
  margin-left: 20px;
  color: rgba(183, 138, 101, 1);
}
.ranking-2 {
  width: 100%;
  float: left;
  /* background-color: aqua; */
  font-size: 24px;
}
.pai{
  width: 100%;
  height: 100%;
  float: left;
}
</style>